<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<title>阳光牌友</title>  
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="">
	<meta http-equiv="content-security-policy">
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!--mui样式-->
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/app.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/mui.picker.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/mui.picker.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui/mui.poppicker.css"/>
	<!--环信-->
	<script type="text/javascript" src="js/hx/strophe.js" ></script>
	<script type="text/javascript" src="js/hx/websdk-1.1.2.js"></script>
	<script type="text/javascript" src="js/hx/websdk.config.js"></script>
	<script type="text/javascript" src="js/hx/websdk.shim.js"></script> 
	<script type="text/javascript" src="js/bq.js"></script> 
	<!--环信-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yWnFso0oyjmX79HzCx1DRz2sBtvweQfI"></script>
	<link rel="stylesheet" href="css/loding/fakeLoader.css"/>
	<!--头像上传-->
	<link rel="stylesheet" href="css/cropper.css"/>
	<script src="js/cropper.js"></script>
	<!-- 公共样式与字体  -->
	<link rel="stylesheet" href="css/public.css"/>
	<link rel="stylesheet" type="text/css" href="icon-font/iconfont.css"/>
	<!-- 定制样式   -->
	<link rel="stylesheet" href="css/style.css"/>
	<link rel="stylesheet" href="css/bq.css" />
	<link rel="stylesheet" type="text/css" href="css/NewStyle.css"/>
	<!-- Swiper 样式  -->
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	<link rel="stylesheet" href="css/appstyle.css" />
	<style type="text/css">
		.rgba{display: none;}
	</style>
</head>
<body>
	<div class="App">
		<span>阳光牌友</span>
		<button>下载APP</button>
	</div>
	<div class="pHead mui-navbar-inner mui-bar mui-bar-nav header_1">
		<h2>店铺详情</h2>
		<!--<b class="iconfont icon-weixin shop_weixin"></b>-->
	</div>
	<div class="pBody Shop mui-page-content" style="background-color: #f4f4f4;">
		<div id="ShopSwiperBanner">
			
		</div>
	    <ul class="list">
	    	<li class="clearfix list-header">
    			<img src="http://www.yuzhuli.com/Public/upload/image/170429_015749_8761.jpg" class="tu">
    			<p class="left">
    				<span class="name">华成休闲茶室</span>
	    			<span class="score clearfix" id="shop_score">
		    			<span class="iconfont icon-wujiaoxing" style="color: rgb(238, 238, 238);"></span>
		    			<span class="iconfont icon-wujiaoxing" style="color: rgb(238, 238, 238);"></span>
		    			<span class="iconfont icon-wujiaoxing" style="color: rgb(238, 238, 238);"></span>
		    			<span class="iconfont icon-wujiaoxing" style="color: rgb(238, 238, 238);"></span>
		    			<span class="iconfont icon-wujiaoxing" style="color: rgb(238, 238, 238);"></span>
	    			</span>
    			</p>
    			<p class="fl-left phone">
    				<a href="tel:15000127026" class="iconfont icon-dianhua"></a>
    				<span>电话咨询</span>
    			</p>
    			<p class="ShopAddress" lng="121.275104" lat="31.396709">
    				<span class="iconfont icon-dibiao"></span>
    				<span>上海市上海市闵行区梅陇镇虹梅南路2555弄3号102室</span>
    			</p>
	    	</li>
	    	<li class="main clearfix">
	    		<p class="PurchaseNotice">
    				<span class="iconfont icon-laba"></span>
    				<span>须知<span style="color:#f00;font-size:0.20rem;margin: 0.02rem 0 0 0.15rem;">请电话确认预约！</span></span>
    			</p>
	    	</li>
	    	<li class="content content2 style_content"><pre id="content_pre">全天服务 ；茶楼棋牌<br>40-60元/场 <br>要想详情了解更多优惠信息，请致电咨询。<br></pre></li>
	    	<li class="main clearfix" id="pl">
	    		<p class="PurchaseNotice">
    				<span class="iconfont icon-pingjia"></span>
    				<span>评价</span>
    			</p>
	    	</li>
	    </ul>
	    <!--<button class="btn">我要预约</button>-->
	    <div class="Eject">
	    	<div class="rgba" style="display: none;"></div>
	    	<ul class="Make-An-Appointment Eject-block">
	    		<li id="E_name">华成休闲茶室</li>
	    		<li><span>*</span><span>情按实际情况填写以下信息，方便我们为您准确无误的安排。</span></li>
	    		<li><input type="number" placeholder="请输入预约人数" id="lj-num"></li>
	    		<li class="double">
	    			<div id="demo1" data-options="{&quot;value&quot;:&quot;2015-10-10 10:10&quot;,&quot;beginYear&quot;:2017,&quot;endYear&quot;:2030}" class="btn mui-btn mui-btn-block">请选择开始时间</div>
	    			<div id="demo3" data-options="{&quot;value&quot;:&quot;2015-10-10 10:10&quot;,&quot;beginYear&quot;:2017,&quot;endYear&quot;:2030}" class="btn mui-btn mui-btn-block">请选择结束时间</div>
	    		</li>
	    		<li><input type="text" placeholder="请填写您的手机号" id="lj-phone"></li>
	    	</ul>
	    	<button class="btn" id="lj-yy">立即预约</button>
	    </div>
	</div>
	<div class="rgba"></div>
	<div class="" id="tan2"></div>
	<script src="js/muijs/mui.min.js"></script>
	<script src="js/muijs/mui.picker.min.js"></script>
	<script src="js/muijs/mui.poppicker.js"></script>
	<script src="js/base.js"></script>
	<script src="js/swiper.min.js"></script>
	<script type="text/javascript">
		function tan(text2){
			$("#tan2").addClass("tan");
			$("#tan2").text(text2);
			clearTimeout(a);
			var a = setTimeout (function(){
				ding();
			},2000);
			function ding (){
				$("#tan2").removeClass("tan");
				$("#tan2").text("");
			};
		}
		
		function getCache(key){
			if(localStorage.getItem(key)){
				return JSON.parse(localStorage.getItem(key));
			}else{
				return false;
			}
		}
		
		$('.App button').unbind('click').on('click',function(){
			location.href = 'http://www.yuzhuli.com/';
		});
		
		
		function initLBT(boxId,dataList){
			$('#'+boxId).empty();
			$('#'+boxId).html('<div class="swiper-container swiper_'+boxId+'"><div class="swiper-wrapper SwiperImg_'+boxId+'" style="font-size: 0;"></div><div class="swiper-pagination SwiperSpot_'+boxId+'"></div></div>');
			var html = '';
			$.each(dataList,function(i,d){
				html += '<div class="swiper-slide"><img src="' + d + '"></div>';
			});
			$('.SwiperImg_'+boxId).html(html);
			LBT('.swiper_'+boxId,'.SwiperSpot_'+boxId);
		}
	    function LBT(swiper1,swiper2) {
			//轮播图
			var swiper = new Swiper(swiper1, {
				pagination: swiper2,
				paginationClickable: true,
				loop:true
			});
			swiper.update();
		}
	    
	    function GetQueryString(name){
		     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		     var r = window.location.search.substr(1).match(reg);
		     if(r!=null)return  unescape(r[2]); return null;
		}
	    
//		$(".btn").unbind('tap').on('tap',function(){
//			$(".Eject,.rgba").show();
//		});

		$('#demo1').unbind('tap').on('click',function(){
			var optionsJson = this.getAttribute('data-options') || '{}';
			var options = JSON.parse(optionsJson);
			var id = this.getAttribute('id');
			var picker = new mui.DtPicker(options);
			var this_ = this;
			var len = $('.mui-dtpicker').length;
			picker.show(function(rs) {
				this_.innerText = rs.text;
				picker.dispose();
			});
			if(len>=1){
				var len2 = len-1;
				for(var i = 0 ; i < len2;i++){
					$('.mui-dtpicker').eq(i).remove();
					$('.mui-backdrop').eq(i).remove();
				}
				return false;
			}
		});
		$('#demo3').unbind('tap').on('click',function(){
			var optionsJson = this.getAttribute('data-options') || '{}';
			var options = JSON.parse(optionsJson);
			var id = this.getAttribute('id');
			var picker = new mui.DtPicker(options);
			var this_ = this;
			var len = $('.mui-dtpicker').length;
			picker.show(function(rs) {
				this_.innerText = rs.text;
				picker.dispose();
			});
			if(len>=1){
				var len2 = len-1;
				for(var i = 0 ; i < len2;i++){
					$('.mui-dtpicker').eq(i).remove();
					$('.mui-backdrop').eq(i).remove();
				}
				return false;
			}
		});
		
		$(".rgba").unbind('tap').on('tap',function() {
			$(".Eject,.rgba").hide();
		});
		
		$("header").css("z-index","55");
		
		var token2 = getCache('token');
		var parm = GetQueryString('id');
		
		var url2 = 'http://www.yuzhuli.com/api.php/Api/shop_info';
		
	    $.post(url2,{id:parm,token:token2},function(obj){
	    	if(obj.s){
				$(".icon-wujiaoxing").css("color","#eee");
	    		var p = obj.d;
	    		var lun = p.pinglun_info;
	    		$("#pl").find('.block2').remove();
    			if(p.id == parm){
    				$(".left .name,#E_name").text(p.shopname);
    				if(p.tel==null){
    					$(".phone a").attr("href","tel:"+p.phone);
    				}else{
    					$(".phone a").attr("href","tel:"+p.tel);
    				}
    				$("#content_pre").html(p.ds);
    				$(".ShopAddress").attr('lng',p.lng).attr('lat',p.lat);
    				$(".list-header img").attr("src",p.listimg);
    				$(".list-header .ShopAddress span:nth-last-child(1)").text(p.pro + p.city + p.area + p.addr);
    				$("#shop_score span").slice(0,p.xing).css("color","#ff9d09");
    				initLBT('ShopSwiperBanner',p.showimg);
		    		$.each(lun, function(ii,dd) {
		    			var name = dd.nickname != null?dd.nickname:'用户';
		    			var tpl = '<div class="block2 clearfix"><div class="left"><p class="">'+name+'</p>';
		    			tpl += '<p class="score clearfix"><span class="iconfont icon-wujiaoxing"></span><span class="iconfont icon-wujiaoxing"></span><span class="iconfont icon-wujiaoxing"></span><span class="iconfont icon-wujiaoxing"></span><span class="iconfont icon-wujiaoxing"></span></p>';
			    		tpl += '<p>'+dd.content+'</p>';
		    			tpl += '</div>';
		    			tpl += '<p class="fl-left"><span style="letter-spacing: 0.02rem;">'+dd.ctime+'</span></p>';
		    			if(dd.ping_img && dd.ping_img.length>0){
			    			tpl += '<p class="fl-left img" style="">';
			    			$.each(dd.ping_img,function(iii,ddd){
			    				if(ddd == ""){
			    					
			    				}else{
				    				tpl += '<i style="background-image:url('+ddd+')"></i>';
			    				}
			    			});
			    			tpl += '</p>';
		    			}
		    			tpl += '</div>';
		    			$("#pl").append(tpl);
		    			$(".block2").eq(ii).find(".icon-wujiaoxing").slice(0,dd.xing).css("color","#ff9d09");
		    		});
	    			$(".ShopAddress").unbind('tap').on('tap',function(){});
    			}
	    	}else{
	    		tan("获取失败");
	    	}
	    });
		var Z_phone = /^1[0-9]{1}[0-9]{9}$/;
	    $("#lj-yy").unbind('tap').on('tap',function(){
			var url2 = 'http://www.yuzhuli.com/api.php/Api/shop_order';
	    	var num = $("#lj-num").val();
	    	var time1 = $("#demo1").text();
	    	var time2 = $("#demo3").text();
	    	var phone = $("#lj-phone").val();
	    	var address2 = $(".ShopAddress span:nth-last-child(1)").text();
			var time = time1 + "-"+ time2;
			var token = getCache('token');
			if(token){
		    	if(num && time && phone){
		    		if(Z_phone.test(phone)){
					    $.post(url2,{token:token2,person_num:num,order_time:time,phone:phone,address:address2,shopid:parm},function(obj){
					    	if(obj.s){
					    		tan("预约成功");
					    		$(".Eject ,.rgba").hide();
					    	}else{
					    		tan("预约失败");
					    	}
					    });
		    		}else{
		    			tan("请填写正确手机号");
		    		}
		    	}else{
		    		tan("请填写完整信息");
		    	}
			}else{
				tan('请先登录');
			}
	    });
	</script>
</body>
</html>
